<template>
    <BasicModal v-bind="config" @register="registerModal" :title="currTitle" wrapClassName="loginSelectModal" v-model:visible="visible">
        <a-form ref="formRef" :model="formState" :rules="rules" v-bind="layout" :colon="false" class="loginSelectForm">
            <!--多租户选择-->
            <a-form-item v-if="isMultiTenant" name="tenantId" :validate-status="validate_status">
                <!--label内容-->
                <template #label>
                    <a-tooltip placement="topLeft">
                        <template #title>
                            <span>您隶属于多租户，请选择登录租户</span>
                        </template>
                        <a-avatar style="background-color: #87d068" :size="30">
                            租户
                        </a-avatar>
                    </a-tooltip>
                </template>
                <template #extra v-if="validate_status=='error'">
                    <span style="color: #ED6F6F">请选择登录租户</span>
                </template>
                <!--租户下拉内容-->
                <a-select v-model:value="formState.tenantId" @change="handleTenantChange" placeholder="请选择登录租户"  :class="{'valid-error':validate_status=='error'}">
                    <template v-for="tenant in tenantList" :key="tenant.id">
                        <a-select-option :value="tenant.id">{{ tenant.name }}</a-select-option>
                    </template>
                </a-select>
            </a-form-item>
            <!--多部门选择-->
            <a-form-item v-if="isMultiDepart" :validate-status="validate_status1" :colon="false">
                <!--label内容-->
                <template #label>
                    <a-tooltip placement="topLeft">
                        <template #title>
                            <span>您隶属于多部门，请选择登录部门</span>
                        </template>
                        <a-avatar style="background-color: rgb(104, 208, 203);" :size="30">
                            部门
                        </a-avatar>
                    </a-tooltip>
                </template>
                <template #extra v-if="validate_status1=='error'">
                    <span style="color: #ED6F6F">请选择登录部门</span>
                </template>
                <!--部门下拉内容-->
                <a-select v-model:value="formState.orgCode" @change="handleDepartChange" placeholder="请选择登录部门" :class="{'valid-error':validate_status1=='error'}">
                    <template v-for="depart in departList" :key="depart.orgCode">
                        <a-select-option :value="depart.orgCode">{{ depart.departName }}</a-select-option>
                    </template>
                </a-select>
            </a-form-item>
        </a-form>

        <template #footer>
            <a-button @click="handleSubmit" type="primary">确认</a-button>
        </template>
    </BasicModal>
</template>

<script lang="ts">
    import {defineComponent, ref, computed, watch, unref, reactive,UnwrapRef } from 'vue';
    import {Avatar} from 'ant-design-vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {useMessage} from '/@/hooks/web/useMessage';
    import {useUserStore} from '/@/store/modules/user';
    import {defHttp} from '/@/utils/http/axios';
    interface FormState {
        orgCode: string | undefined;
        tenantId: number;
    }
    export default defineComponent({
        name: 'loginSelect',
        components: {
            Avatar,
            BasicModal,
        },
        emits: ['success','register'],
        setup(props, {emit}) {
            const userStore = useUserStore();
            const {notification} = useMessage();
            //租户配置
            const isMultiTenant = ref(false);
            const tenantList = ref([]);
            const validate_status = ref('');
            //部门配置
            const isMultiDepart = ref(false);
            const departList = ref([]);
            const validate_status1 = ref('');
            //弹窗显隐
            const visible = ref(false);
            //登录用户
            const username = ref('');
            //表单
            const formRef = ref();
            //选择的租户部门信息
            const formState: UnwrapRef<FormState> = reactive({
                orgCode: undefined,
                tenantId: null,
            });
            
            const config ={
                maskClosable:false, 
                closable:false,
                canFullscreen:false,
                width:"500px" ,
                minHeight: 20,
                maxHeight: 20,
            };
            //弹窗操作
            const [registerModal, {closeModal}] = useModalInner();

            //当前标题
            const currTitle = computed(() => {
                if (unref(isMultiDepart) && unref(isMultiTenant)) {
                    return '请选择租户和部门'
                } else if (unref(isMultiDepart) && !unref(isMultiTenant)) {
                    return '请选择部门'
                } else if (!unref(isMultiDepart) && unref(isMultiTenant)) {
                    return '请选择租户'
                }
            });
            
            const rules = ref({
                tenantId: [{ required: unref(isMultiTenant),type:'number', message: '请选择租户',  trigger: 'change' }],
                orgCode: [{ required: unref(isMultiDepart), message: '请选择部门', trigger: 'change' }],
            });

            const layout = {
                labelCol: { span: 4 },
                wrapperCol: { span: 18 },
            };
            /**
             * 处理部门情况
             */
            function bizDepart(loginResult) {
                let multi_depart = loginResult.multi_depart;
                //0:无部门 1:一个部门 2:多个部门
                if (multi_depart == 0) {
                    notification.warn({
                        message: '提示',
                        description: `您尚未归属部门,请确认账号信息`,
                        duration: 3
                    });
                    isMultiDepart.value = false
                } else if (multi_depart == 2) {
                    isMultiDepart.value = true;
                    departList.value = loginResult.departs
                } else {
                    isMultiDepart.value = false
                }
            }

            /**
             * 处理租户情况
             */
            function bizTenantList(loginResult) {
                let tenantArr = loginResult.tenantList;
                if (Array.isArray(tenantArr)) {
                    if (tenantArr.length === 0) {
                        isMultiTenant.value = false;
                        userStore.setTenant(formState.tenantId)
                    } else if (tenantArr.length === 1) {
                        formState.tenantId = tenantArr[0].id;
                        isMultiTenant.value = false;
                        userStore.setTenant(formState.tenantId)
                    } else {
                        isMultiTenant.value = true;
                        tenantList.value = tenantArr
                    }
                }
            }

            /**
             * 确认选中的租户和部门信息
             */
            function handleSubmit() {
                if (unref(isMultiTenant) && !formState.tenantId) {
                    validate_status.value = 'error';
                    return false
                }
                if (unref(isMultiDepart) && !formState.orgCode) {
                    validate_status1.value = 'error';
                    return false
                }
                formRef.value.validate().then(() => {
                    departResolve().then(() => {
                        userStore.setTenant(formState.tenantId);
                        emit('success')
                    }).catch((e) => {
                        console.log('登录选择出现问题', e)
                    }).finally(()=>{
                        close()
                    })
                }).catch(err => {
                    console.log('表单校验未通过error', err);
                });
            }
            /**
             *切换选择部门
             */
            function departResolve() {
                return new Promise((resolve, reject) => {
                    if (!unref(isMultiDepart)) {
                        resolve();
                    } else {
                        let params = {orgCode: formState.orgCode, username: unref(username)};
                        defHttp.put({url: "/sys/selectDepart", params}).then(res => {
                            if (res.userInfo) {
                                userStore.setUserInfo(res.userInfo);
                                resolve();
                            } else {
                                requestFailed(res);
                                userStore.logout();
                                reject();
                            }
                        })
                    }
                })
            }
            
            /**
             * 请求失败处理
             */
            function requestFailed(err) {
                notification.error({
                    message: '登录失败',
                    description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
                    duration: 4,
                });
            }

            /**
             * 关闭model
             */
            function close() {
                closeModal();
                reset();
            }
            /**
             * 弹窗打开前处理
             */
            async function show(loginResult) {
                if(loginResult){
                    username.value = userStore.username;
                    await reset();
                    await bizDepart(loginResult);
                    await bizTenantList(loginResult);
                    if (!unref(isMultiDepart) && !unref(isMultiTenant)) {
                        emit('success', userStore.getUserInfo)
                    }else{
                        visible.value = true
                    }
                }
            }

            /**
             *重置数据
             */
            function reset() {
                tenantList.value = []
                validate_status.value = ''

                departList.value = []
                validate_status1.value = ''
            }
            
            function handleTenantChange(e) {
                validate_status.value = ''
            }

            function handleDepartChange(e) {
                validate_status1.value = ''
            }

            return {
                registerModal,
                visible,
                tenantList,
                isMultiTenant,
                validate_status,
                isMultiDepart,
                departList,
                validate_status1,
                formState,
                rules,
                layout,
                formRef,
                currTitle,
                config,
                handleTenantChange,
                handleDepartChange,
                show,
                handleSubmit
            }
        }
    })
</script>

<style lang="less" scoped>
  .loginSelectForm{
      margin-bottom: -20px;
  }
  
  .loginSelectModal{
      top: 10px;
  }
</style>
